import React, { useState } from 'react';

export default function Testone() {
  let [num, setNum] = useState(0);

  const handle = () => {
    setNum(num + 10);
    console.log(num); //
  };
  return (
    <>
      <span>{num}</span>
      <button onClick={handle}>add</button>
    </>
  );
}

/* 
1 useState的基础用法
let [num,setNum] =useState(initialValue)
 + 执行useState,传递的initialValue是初始的状态值
 + 执行这个方法,返回结果是一个数组：[状态值，修改状态的方法]
    + num变量存储的是：获取的状态值
    + setNum变量存储的是：修改状态的方法
 + 执行 setNum(value)
    + 修改状态值为value
    + 通知视图更新

2 useState的处理机制
函数组件的每一次渲染(或者是更新)，都是函数重新执行，产生一个全新的'私有上下文'!(私有上下文也就是私有作用域)。
 + 内部的代码也需要重新执行
 + 涉及的函数需要重新的构建{这些函数的作用域(函数执行的上下文)，是每一次执行DEMO产生的闭包}
 + 每一次执行DEMO函数，也会把useState重新执行，但是：
      + 执行useState，只有第一次，设置的初始值会生效，其余以后再执行，获取的状态都是最新的状态值             【而不是初始值】
      + 返回修改状态的方法，每一次都是返回一个新的
*/
